import React from 'react';
import { connect } from 'dva';
import { routerRedux } from 'dva/router';
import { List, Icon,ActivityIndicator } from 'antd-mobile';
import content from '../../../common/contentCss/content.css';
import CustTitle from '../../../common/title/title';
import CheckBox from './pages/checkBox/checkBox';
import WorkingAreaCheckBox from './pages/checkBox/workingArea/workingAreaCheckBox';
import CustBtn from '../../../../../common/buttons/Btn';

function JobIntention({dispatch,loading,jobIntention}) {

  const {data, selectJobType, selectworkingArea} = jobIntention;

  const titleProps = {
    titleName:'求职意向',
    showSaveBtnStatus: true,
    saveBtnName: '重置',
    goBack(){
      history.go(-1);
    },
    onSave(){
      console.log('求职意向---重置');
      dispatch({
        type:'jobIntention/querySuccess',
        payload:{
          selectJobType: [],
          selectworkingArea: []
        }
      })
    },
  }

  const btnProps = {
    textValue:'提交',
    onOk(){
      dispatch({
        type:'jobIntention/onSublime',
      })
    },
  }

  const MarginHeight = () => <div style={{height: '0.6em', backgroundColor:'#F5F5F9'}}></div>;

  const showJopTypes = (list,selectJobType) => {
    if(list && list.length > 0){
      const jobType = {
        textName: '兼职类型',
        valueArr: list,
        selectArr: selectJobType ? selectJobType : [],
        onSelect(data){
          dispatch({
            type:'jobIntention/onSelect',
            payload:{
              select: 'selectJobType',
              data
            }
          })
        }
      }
      return <CheckBox {...jobType} />;
    }
  }

  const showWorkingAreaTypes = (list,selectWorkingAreaType) => {
    if(list && list.length > 0){

      const workingAreaType = {
        textName: '工作区域',
        valueArr: list,
        selectArr: selectWorkingAreaType ? selectWorkingAreaType : [],
        onSelect(data){
          dispatch({
            type:'jobIntention/onSelect',
            payload:{
              select: 'selectworkingArea',
              data
            }
          })
        }
      }
      return <WorkingAreaCheckBox {...workingAreaType} />;
    }
  }

  return(
    <div className={content.content} style={{backgroundColor:'#fff'}}>
      <CustTitle {...titleProps}/>
      <div style={{
        marginTop: '2.8125em',
      }}>
      </div>
      {showJopTypes(data.jobPlanTypes, selectJobType)}
      {showWorkingAreaTypes(data.areas, selectworkingArea)}
      <div style={{margin:'0 3em'}}>
        <CustBtn {...btnProps}/>
      </div>
      <ActivityIndicator
        toast
        text=""
        animating={loading}
      />
    </div>
  )
}

function mapStateToProps(state, ownProps) {
  return {
    jobIntention: state.jobIntention,
    loading: state.loading.global,
  }
}

export default connect(mapStateToProps)(JobIntention);
